<template>
    <div class="module">
      <img src="../../public/614.jpeg" class="tu"  @mouseover="hover = true" @mouseleave="hover = false">
      <h3>我校橄榄球队再获佳绩</h3>
      <p>我校橄榄球队已连续四年在该项赛事上取得优异成绩。教练员刘剑宇表示，雪地橄榄球战术多样、对抗性强，队员们不畏严寒，敢打敢拼、默契配合，是对东林学子道德品质、精神面貌和健康体魄的良好展示。作为体育老师，今后将继续推广雪地橄榄球运动，为提升学生身体健康水平，为学校冰雪运动水平再上新台阶贡献力量。</p>
    </div>
  </template>
  
 
<script>
export default {
  data() {
    return {
      hover: false // 添加一个数据属性来控制鼠标悬浮状态
    };
  }
};
</script>

<style scoped>
.module {
  margin: 20px;
  border: 1px solid #232323;
  background-color: rgba(255, 224, 183, 0.2);
  position: relative; /* 确保模块是相对定位的 */
}

.tu {
  width: 100%;
  height: 200px;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.tu:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大图片 */
}
</style>